<script setup>
import {
    ElButton,
    ElRow,
    ElCol,
    ElDialog,
    ElMessage,
    ElBacktop,
} from 'element-plus'
import { Setting } from '@element-plus/icons-vue'
import Score from './components/Score.vue'
import ConfigForm from './components/ConfigForm.vue'
import Controls from './components/Controls.vue'
import OpenSerial from './components/OpenSerial.vue'
import DeviceList from './components/DeviceList.vue'
import { onMounted, ref } from 'vue'
import { useConfigStore } from './stores/config'
import { useStatusStore } from './stores/status'
import { useDeviceStore } from './stores/device'

const config = useConfigStore()
const status = useStatusStore()
const devices = useDeviceStore()

onMounted(async () => {
    // 获取配置
    const success = await config.initConfig()
    if (!success) {
        ElMessage.error('配置加载失败，请检查服务器连接！')
    }
})

const configDialogVisible = ref(false)
</script>

<template>
    <el-row justify="center" class="app-container">
        <el-col :span="20">
            <!-- 标题 -->
            <div class="mt20">
                <h1>多机评分系统</h1>
            </div>
            <!-- 分数 -->
            <score />
            <!-- 控制按钮 -->
            <el-row class="controls">
                <el-col>
                    <el-row class="mt20 controls" justify="center">
                        <el-button
                            :icon="Setting"
                            @click="configDialogVisible = true"
                            >修改配置</el-button
                        >
                        <OpenSerial v-if="!status.serialOpened" />
                        <Controls v-else />
                    </el-row>
                </el-col>
            </el-row>
            <!-- 配置 -->
            <el-dialog
                v-model="configDialogVisible"
                title="修改配置"
                destroy-on-close
            >
                <ConfigForm />
            </el-dialog>
            <!-- 设备列表 -->
            <DeviceList />
            <el-backtop :right="100" :bottom="100" />
        </el-col>
    </el-row>
</template>

<style scoped>
.app-container {
    margin-bottom: 50px;
}

.mt20 {
    margin-top: 20px;
}

.controls {
    margin-top: 50px;
}
</style>
